<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('事项跟进管理')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-5 b-r">
                        <div id="vertical-timeline" class="vertical-container light-timeline">
                            <div class="vertical-timeline-block" th:each="log : ${approveLogs}">
                                <div th:class="${(log.approveResult == 30 || log.approveResult == 10) ? 'vertical-timeline-icon red-bg' : 'vertical-timeline-icon navy-bg'}">
                                    <i class="fa fa-briefcase"></i>
                                </div>
                                <div class="vertical-timeline-content">
                                    <h2 th:text="${log.remark}"></h2>
                                    <p th:text="${log.createBy} + ' ' + ${#dates.format(log.createTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                                    <span th:text="${log.approveComment}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <form class="form-horizontal m" id="form-edit">
                            <input id="projectItemId" name="projectItemId" type="hidden" th:field="${projectItem.projectItemId}"/>
                            <input name="projectItemStatus" value="40" type="hidden">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">事项名称：</label>
                                <div class="col-sm-8">
                                    <div class="form-control" th:text="${projectItem.stageItem.itemName}"></div>
                                </div>
                            </div>
                            <!--<div class="form-group">
                                <label class="col-sm-3 control-label is-required">事项状态：</label>
                                <div class="col-sm-8">
                                    <div class="radio-box" th:each="dict : ${@dict.getType('eb_project_item_status')}">
                                        <input type="radio" th:id="${dict.dictCode}" name="projectItemStatus" th:value="${dict.dictValue}" th:field="${projectItem.projectItemStatus}">
                                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                                    </div>
                                </div>
                            </div>-->
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">印证材料：</label>
                                <div class="col-sm-8">
                                    <div class="file-loading">
                                        <input id="multipleFile" name="files" accept="application/pdf, image/png, image/jpg, image/jpeg" type="file" multiple>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <textarea id="remark" name="remark" class="form-control" th:field="${projectItem.remark}"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var fileList = new Array();
        $(document).ready(function () {
            // 多图上传
            $("#multipleFile").fileinput({
                uploadUrl: ctx + 'common/uploads',
                maxFileCount:'2',
                allowedFileExtensions: ['jpg', 'png', 'jpeg', 'pdf'],
                uploadAsync: false,
                maxFileSize: 1024 * 50
            }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
                var rsp = data.response;
                log.info("return urls：" + rsp.urls)
                log.info("reutrn fileNames：" + rsp.fileNames)
                log.info("reutrn newFileNames：" + rsp.newFileNames)
                log.info("return originalFilenames：" + rsp.originalFilenames)
                if (rsp.urls && rsp.urls != 'undefined') {
                    var urlArray = rsp.urls.split(",");
                    var fileNameArray = rsp.fileNames.split(",");
                    var newFileNameArray = rsp.newFileNames.split(",");
                    var oriFileNameArray = rsp.originalFilenames.split(",");
                    for (var i = 0; i < urlArray.length; i++) {
                        fileList.push({
                            'url':urlArray[i],
                            'fileName':newFileNameArray[i],
                            'oriFileName':oriFileNameArray[i],
                            'filePath':fileNameArray[i]
                        })
                    }
                }

            }).on('fileuploaded', function (event, data, previewId, index) {
                var rsp = data.response;
                log.info("return urls：" + rsp.urls)
                log.info("reutrn fileNames：" + rsp.fileNames)
                log.info("reutrn newFileNames：" + rsp.newFileNames)
                log.info("return originalFilenames：" + rsp.originalFilenames)
                if (rsp.urls && rsp.urls != 'undefined') {
                    var urlArray = rsp.urls.split(",");
                    var fileNameArray = rsp.fileNames.split(",");
                    var newFileNameArray = rsp.newFileNames.split(",");
                    var oriFileNameArray = rsp.originalFilenames.split(",");
                    for (var i = 0; i < urlArray.length; i++) {
                        fileList.push({
                            'url':urlArray[i],
                            'fileName':newFileNameArray[i],
                            'oriFileName':oriFileNameArray[i],
                            'filePath':fileNameArray[i]
                        })
                    }
                }

            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            });
        });

        function submitHandler(index, layero) {
            return saveProjectItem();
        }

        function saveProjectItem() {
            if (fileList.length == 0) {
                $.modal.msgError("请上传印证材料");
                return false;
            }

            var data = $('#form-edit').serializeArray();
            // data.push({'name':'fileList[0].fileName', 'value':fileList});
            // data.push({'name':'fileList[0].fileName', 'value':'fileList'});
            // data.push({'name':'fileList[0].oriFileName', 'value':'oriFileName'});

            for (var i = 0; i < fileList.length; i++) {
                log.info(fileList[i]);
                data.push({'name': 'fileList['+i+'].fileName', 'value':fileList[i].fileName});
                data.push({'name': 'fileList['+i+'].oriFileName', 'value':fileList[i].oriFileName});
                data.push({'name': 'fileList['+i+'].filePath', 'value':fileList[i].filePath});
            }

            log.info(data);
            $.ajax({
                cache : true,
                type : "POST",
                url : ctx + "manage/itemdetail/edit",
                data : data,
                async : false,
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    $.modal.close();
                }
            });

            return true;
        }
    </script>
</body>
</html>